<template>
    <a-popup
        ref="popup"
        :popPlacement="popPlacement"
        :getPopModifiersFunc="getPopModifiersFunc"
        v-model:popShown="popShown"
    >
        <slot></slot>

        <template v-slot:pop>
            <div class="pop-container" :class="[`c-shadow-${size}`]">
                <div
                    class="tooltip-container"
                    :class="[
                        sharp ? '' : `c-round-${size}`,
                        `c-font-size-${size}`,
                        `c-p-${size}`,
                    ]"
                >
                    {{ tips }}
                </div>
                <div class="pop-arrow"></div>
            </div>
        </template>
    </a-popup>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.pop-container {
    background-color: transparent;
}

.tooltip-container {
    background-color: #333;
    color: #fff;
    max-width: 400px;
}

.pop-arrow {
    width: 10px;
    height: 10px;
    z-index: -1;

    &::before {
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        background-color: #333;
        transform: rotate(45deg);
        transform-origin: center center;
    }
}

.pop-container[data-popper-placement^="top"] {
    .pop-arrow {
        bottom: -5px;
    }
}
.pop-container[data-popper-placement^="bottom"] {
    .pop-arrow {
        top: -5px;
    }
}
.pop-container[data-popper-placement^="left"] {
    .pop-arrow {
        right: -5px;
    }
}
.pop-container[data-popper-placement^="right"] {
    .pop-arrow {
        left: -5px;
    }
}
</style>

<script>
import APopup from './APopup.vue'
import utils from "../common/utils"

export default {
    components: { APopup },
    props: {
        /**
         * 对齐到target的位置
         */
        popPlacement: {
            type: String,
            default: 'top'
        },
        size: {
            type: String,
            default: 'm',
        },
        sharp: {
            type: Boolean,
            default: false,
        },
        tips: {
            type: String,
        }
    },
    data() {
        return {
            popShown: false,
            prepareToHide: false
        }
    },
    computed: {
        sizePackage() {
            return utils.getSizePackageByName(this.size)
        }
    },
    mounted() {
        this.addTargetEventListener()
    },
    watch: {
        popShown(val) {
            if (val) {
                this.addPopEventListener()
            }
        }
    },
    methods: {
        getTargetEl() {
            return this.$refs.popup.getTargetEl()
        },
        getPopEl() {
            return this.$refs.popup.getPopEl()
        },
        addTargetEventListener() {
            let targetEl = this.getTargetEl()
            targetEl.addEventListener('mouseover', this.onMouseover)
            targetEl.addEventListener('mouseout', this.onMouseout)
        },
        addPopEventListener() {
            this.$nextTick(() => {
                let popEl = this.getPopEl()
                popEl.addEventListener('mouseover', this.onMouseover)
                popEl.addEventListener('mouseout', this.onMouseout)
            })
        },
        onMouseover(e) {
            this.popShown = true
            this.prepareToHide = false
        },
        onMouseout(e) {
            this.prepareToHide = true
            setTimeout(() => {
                if (this.prepareToHide) {
                    this.popShown = false
                }
            }, 50)
        },
        getPopModifiersFunc() {
            return [
                {
                    name: 'offset',
                    options: {
                        offset: [0, this.sizePackage.space / 2],
                    }
                },
                {
                    name: 'arrow',
                    options: {
                        element: this.getPopEl().getElementsByClassName('pop-arrow')[0],
                    },
                },
            ]
        },
    }
}
</script>